<template>
  <div class="articlep_item">
    <!-- 搜索模块 -->
    <div class="articlep_warp_whatsapp tydisplay">
      <div class="articlep_warp_whatsapp_left">
        <img src="@/assets/infor_whatsapp/icon_bule_home.png" alt="" />
        <span class="articlep_span">&nbsp;&nbsp;/&nbsp;&nbsp;Whatsapp</span>
      </div>
      <div class="articlep_warp_whatsapp_right">
        <input type="text" />
        <button>搜&nbsp;索</button>
      </div>
    </div>

    <!-- 最新文章 -->
    <div class="articlep_warp_new">
      <div class="articlep_warp_new_t">
        <h4>最新文章</h4>
      </div>
      <div class="articlep_warp_item_w">
        <div class="articlep_warp_new_c tydisplay">
          <div
            class="articlep_warp_new_item tydisplay"
            v-for="(item, i) in sousList"
            :key="i"
          >
            <div class="articlep_warp_new_number">{{ item.number }}</div>
            <div class="articlep_warp_new_content" @click="detailLists(item)">
              {{ item.content }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "sousuo",
  props:["sousList"],
  methods:{
    detailLists(i){
      console.log(i);
      this.$router.push({
        path: "/articlep",
      });
    }
  }
};
</script>

<style scoped>
.tydisplay {
  display: flex;
}
.articlep_item {
  max-width: 1130px;
  margin: 0 auto;
}
/* 最新文章 */
.articlep_warp_new_t > h4 {
  padding: 26px 20px;
  font-size: 24px;
  color: #1d2845;
}
.articlep_warp_item_w {
  padding-left: 60px;
  border-bottom: 2px solid #e0e0e0;
}
.articlep_warp_new_c {
  justify-content: space-between;
  flex-wrap: wrap;
}
.articlep_warp_new_item {
  width: 303px;
  font-size: 16px;
  font-weight: bold;
  color: #1d2845;
  padding: 0 0 30px 0;
  cursor: pointer;
}
.articlep_warp_new_number {
  width: 35px;
  font-size: 18px;
  color: #077af1;
}
.articlep_warp_new_content {
  flex: 1;
  line-height: 25px;
}
.articlep_warp_whatsapp {
  justify-content: space-between;
  padding: 26px 30px;
  border-bottom: 2px solid #e0e0e0;
}
.articlep_span {
  color: #868e96;
  font-size: 16px;
  font-weight: bold;
}
.articlep_warp_whatsapp_left > img {
  vertical-align: middle;
  width: 28px;
}
.articlep_warp_whatsapp_right {
  outline: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #fff;
}
.articlep_warp_whatsapp_right > input {
  height: 26px;
  outline: none;
  border: none;
  padding-left: 10px;
  font-size: 16px;
}
.articlep_warp_whatsapp_right > button {
  border: none;
  background: #077af1;
  padding: 6px 20px;
  color: #fff;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  font-size: 16px;
}
</style>